
import { useEffect, useState } from "react";
import * as echarts from "echarts";
import HomePage_ModalComponent from "../../../../../../components/modal";
import HomePage_TableComponent from "../../../../../../components/table";
import modalCloseImage from "../../../../../../assets/image/icon_line_close2@2x.png";
import "./index.less";

// 主页-数据管理页面-录波数据页面-弹窗内容组件
interface recordingDataPageModalContentComponentPropsInterface {
    get_isModalClose: Function
}

const RecordingDataPage_ModalContentComponent: React.FC<recordingDataPageModalContentComponentPropsInterface> = (props) => {

    const parameterList = [
        [
            {
                label: "触发时间",
                key: "",
                unit: ""
            }, {
                label: "预警等级",
                key: "",
                unit: ""
            },], [{
                label: "变电所",
                key: "",
                unit: ""
            }, {
                label: "监测点",
                key: "",
                unit: ""
            }, {
                label: "事件类型",
                key: "",
                unit: ""
            }, {
                label: "持续时间",
                key: "",
                unit: "s"
            }, {
                label: "最大幅度",
                key: "",
                unit: "%"
            },]
    ]
    let echartsLine: echarts.ECharts
    const xList = Array.from({ length: 1000 }, (v, k) => k)
    const init_echarts = () => {
        echartsLine = echarts.init(document.getElementById("echartsLine") as HTMLElement)

    }

    const draw_echarts = () => {
        const option = {
            tooltip: {
                trigger: "axis",
                backgroundColor: "rgba(13, 89, 128, 0.9)",
                borderColor: "#17A1E6",
                axisPointer: {
                    lineStyle: {
                        type: "solid",
                        color: "#17A1E6",
                    },
                },
                formatter(params: Array<object>) {
                    return `
                        <div class="echartsBox-echartsLine__tooltip">
                            <span>1231321:${params[0]["axisValueLabel"]}</span>
                            <div class="echartsLine-tooltip__row">
                                <div class="tooltip-row__legend"></div>
                                <span>${params[0]["data"]}</span>
                            </div>
                         </div>
                      `;
                },
            },

            grid: {
                top: "25px",
                left: "24px",
                right: "4%",
                bottom: "0",
                containLabel: true,
            },
            xAxis: {
                type: "category",
                data: xList,
                boundaryGap: false,
                axisLabel: {
                    fontSize: 12,
                    fontWeight: 400,
                    color: "#8FB8CC",
                    showMinLabel: true,
                    showMaxLabel: true,
                    align: "left",
                    formatter: (() => {
                        return (item: any, idx: any) => {
                            const isLast = idx === xList.length - 1;
                            const label = isLast ? `{last|${item}}` : item;
                            return label;
                        };
                    })(),
                    interval: 99,
                    rich: {
                        last: {
                            width: 0,
                            align: "right",
                        },
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                    },
                },
            },

            yAxis: {
                type: "value",
                axisLabel: {
                    color: "#7A8F99",
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(23, 161, 230, 0.3)",
                        width: 1,
                        type: "solid",
                    },
                },
            },
            series: [{
                type: "line",
                data: [10, 20, 30],
                color: "#2BEDE6",
                showSymbol: false,
                emphasis: {
                    itemStyle: {
                        color: "#2BEDE6",
                        borderWidth: 1,
                        borderColor: "#090D0F",
                    },
                },
            }],
        };

        echartsLine.setOption(option);
    }

    const click_closeModal = () => {
        props.get_isModalClose(false)
    }
    useEffect(() => {
        init_echarts()
        draw_echarts()

    }, [])
    return (
        <div className="homePageDataManagementPageSiteAccountPageTableComponent-recordingDataPageModalContentComponent">
            <header className="homePageDataManagementPageSiteAccountPageTableComponent-recordingDataPageModalContentComponent__header">
                <span>事件详情</span>
                <img className="recordingDataPageModalContentComponent-header__close" src={modalCloseImage} onClick={() => click_closeModal()} />
            </header>
            <main className="homePageDataManagementPageSiteAccountPageTableComponent-recordingDataPageModalContentComponent__main">
                {
                    parameterList.map((item, idx) => {
                        return (
                            <div className="recordingDataPageModalContentComponent-main__row" key={"parameterList" + idx}>
                                {item.map((item, idx) => {
                                    return (
                                        <div className="main-row__block" key={"item" + idx}>
                                            <span>{item.label}：</span>
                                            <span style={{ color: item.label === "预警等级" ? "#B8D6E6" : "#B8D6E6" }}>{item.unit}</span>
                                        </div>
                                    )
                                })}
                            </div>
                        )
                    })
                }
                <div className="recordingDataPageModalContentComponent-main__echartsBox">
                    <span>事件录波</span>
                    <div className="main-echartsBox__echartsLine" id="echartsLine"></div>
                </div>
            </main>
        </div>
    )
}

// 主页-数据管理页面-录波数据页面
const HomePage_DataManagementPage_RecordingDataPage: React.FC = () => {

    const columnList = [
        {
            title: '序号',
            dataIndex: 'idx',
            render: (text: string, record: object, idx: number) => `${idx + 1}`,
        },
        {
            title: '开始时间',
            dataIndex: 'name',
        },
        {
            title: '操作类型',
            dataIndex: 'name',
        },
        {
            title: '监测点',
            dataIndex: 'name',
        },
        {
            title: '事件类型',
            dataIndex: 'name',
        },
        {
            title: '录波时长',
            dataIndex: 'name',
        },
        {
            title: '状态',
            dataIndex: 'name',
        },
        {
            title: '操作',
            align:"right",
            render: (text: string, record: object) => (
               <>
                <span className="homePageDataManagementPageSiteAccountPageTableComponent-information" onClick={() => click_infomation(record["id"])}>详情</span>
                <span className="homePageDataManagementPageSiteAccountPageTableComponent-information" onClick={() => click_infomation(record["id"])}>详情</span>
               </>
            )
        },
    ]

    const [sourceData, setSourceData] = useState<object>({ list: [{}] })
    const [isModal, setIsModal] = useState<boolean>(false)
    const get_pagination = (page: number, pageSize: number) => {


    }
    const get_isModalClose = () => {
        setIsModal(false)
    }
    const click_infomation = (id: number) => {
        setIsModal(true)
    }
    return (
        <div className="homePageDataManagementPageSiteAccountPageTableComponent">
            <HomePage_TableComponent columnList={columnList} sourceData={sourceData} get_pagination={get_pagination} />
            {
                isModal && <HomePage_ModalComponent isPrepareCloseModal={false} get_isModalClose={get_isModalClose} ModalContentComponents={<RecordingDataPage_ModalContentComponent get_isModalClose={get_isModalClose} />} />
            }
        </div>
    )
}

export default HomePage_DataManagementPage_RecordingDataPage